<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0 auto;
            padding: 0;
            list-style: none;
        }
        .lis li{
            width: 1000px;
            height: 750px;
            background-color: aqua;
            border-bottom: 2px solid #f5f;
        }
        .list{
            position: fixed;
            right: 0;top: 50%;
            text-align: center;
            
        }
        .list li{
            width: 80px;
            height: 50px;
            border: solid 1px #000;
        }
        .active{
            background-color: blue;
            color: white;
        }
        .aaa{
            width: 100%;
            height: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="lis">
            <!-- <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul> -->
        </div>
        <div class="aaa"></div>
        <div class="list">
            <!-- <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul> -->
        </div>
    </div>
    <script>
        var arr=['1','2','3','4'];
        var brr=['1','2','3','4','返回顶部'];

        function Big(obj){
            Object.assign(this,obj);
            this.init();

        }
        Big.prototype={
            constructor:Big,

            init:function(){
                this.index=0;
                this.Floor();
                this.Gun();
            },
            Floor:function(){
                var that=this;

                this.lis.innerHTML=that.arr.map((v,i)=>{
                    return `<li>${v}</li>`
                }).join('');
                this.list.innerHTML=that.brr.map((v,i)=>{
                    return `<li class='${this.index==i?'active':''}'>${v}</li>`
                }).join('');
            },

            Gun:function(){
                document.addEventListener('scroll',()=>{
                    var strTop=document.documentElement.scrollTop||document.body.scrollTop;
                    [...this.lis.children].forEach((v,i)=>{
                        var tops=v.offsetTop;

                        if(strTop>=tops){
                            var onl=document.querySelector('.active');
                            onl&&onl.classList.remove('active');
                            [...this.list.children][i].classList.add('active');
                        }
                    })

                }),

                [...this.list.children].forEach((v,i)=>{
                    v.addEventListener('click',()=>{
                        if(i>=this.list.children.length-1){
                            document.documentElement.scrollTop=0;
                        }else{
                            document.documentElement.scrollTop=[...this.lis.children][i].offsetTop;
                        }
                    })
                })
                
            }
        }
        new Big({
            lis:document.querySelector('.lis'),
            list:document.querySelector('.list'),

            arr:arr,
            brr:brr,
        })
    </script>
</body>
</html>